{extend name="other/public"}
{block name='css'}
<style>
  .layui-form-label{width: 130px;}
  .layui-input-block{margin-left: 160px;}
  .add{display: none;}
  .add .layui-form-label{width: 70px;}
  .add .layui-input-block{margin-left: 100px;}
  .layui-text em, .layui-word-aux{line-height: 38px;}
  .c1{justify-content: space-between;padding: 10px 20px;}
  .preview-box {display: none;}
  .preview-box div{text-align: center;height: 500px;width: 500px;}
  .preview-box img{max-width:500px;max-height: 500px;display: block;margin: 0 auto;}
  .layui-tab-content .layui-form-item .layui-input-inline{max-width:500px;width: 100%;}
  .layui-tab-content .layui-form-item .layui-input-inline.data-type-4{max-width:180px ;}
</style>
{/block}

{block name='content'}
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header u-flex c1">
          <div>网站设置</div>
          {eq name="is_super" value="1"}
          <button class="layui-btn open-add" type="button">新增网站设置</button>
          {/eq}
        </div>
        <div class="layui-tab layui-tab-brief">
          <ul class="layui-tab-title">
            {volist name="tabType" id="v" key="k"}
              <li class="{if $k== 1 }layui-this{/if}">{$v['name']}</li>
            {/volist}
          </ul>
          <div class="layui-tab-content"> 
            {for start="1" end="10" name="fori"}
              <div class="layui-tab-item {if $fori == 1 }layui-show{/if}">
              <div class="layui-card-body" pad15>
                <div class="layui-form" lay-filter="">
                  {volist name="config" id="v" key="k"}
                    {eq name="v.type" value="$fori"}
                      <div class="layui-form-item">
                          <label class="layui-form-label">
                            {$v.title}
                            <!-- <input type="hidden" name="title[]" value="{$v.title}" class="layui-input"> -->
                          </label>
                          <div class="layui-input-inline data-type-{$v.data_type}">
                            {if $v.data_type == 1 }
                            <input type="text" name="{$v.key}"  placeholder="{$v.notes}" value="{$v.value}" class="layui-input">
                            {elseif $v.data_type == 2 /}
                            <textarea name="{$v.key}"  placeholder="{$v.notes}" class="layui-textarea">{$v.value}</textarea>
                            {elseif $v.data_type == 3 /}
                            <input type="text" name="{$v.key}"  placeholder="{$v.notes}" value="{$v.value}" class="layui-input img-val-{$k}">
                            {elseif $v.data_type == 4/}
                              <input type="radio" name="{$v.key}" value="true" title="显示" {if $v.value == 'true' }checked{/if}>
                              <input type="radio" name="{$v.key}" value="false" title="不显示" {if $v.value == 'false' }checked{/if}>
                            {/if}
                          </div>
                          <div class="layui-word-aux flex">
                            {if $v.data_type == 3 }
                              <div class="layui-btn-group">
                                <button type="button" class="layui-btn layui-btn-sm img-preview" data-input="img-val-{$k}">预览</button>
                                <button type="button" class="layui-btn layui-btn-sm choice-img choiceimg" data-notes="{$v.notes}" data-input="img-val-{$k}">选择图片</button>
                              </div>
                            {/if}
                            {if $v.key == 'web_lag' || $v.key == 'web_lat'}
                            <div class="layui-btn-group">
                              <a lay-href="https://lbs.amap.com/console/show/picker">
                                <button type="button" class="layui-btn layui-btn-sm">获取经纬度坐标</button>
                              </a>
                            </div>
                            {/if}
                            引用：$c['{$v.key}']
                          </div>
                        </div>
                      {/eq}
                  {/volist}
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" type="button" lay-submit lay-filter="editConfig">确认修改</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {/for}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="preview-box">
  <div class="u-flex"><img src="" alt=""></div>
</div>
<div class="add">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">选项</label>
      <div class="layui-input-inline">
        <select name="type"  lay-verify="required" >
          {volist name="tabType" id="v" key="k"}
          <option value="{$v['id']}">{$v['name']}</option>
          {/volist}
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">标题</label>
      <div class="layui-input-inline">
        <input type="text" name="title" lay-verify="required" class="layui-input" placeholder="请输入">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">变量名</label>
      <div class="layui-input-inline">
        <input type="text" name="key" lay-verify="required" class="layui-input" placeholder="请输入">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">参数类型</label>
      <div class="layui-input-inline">
        <select name="data_type"  lay-verify="required" >
          <option value="">请选择分类</option>
          {volist name="data_type" id="v" key="k"}
          <option value="{$v['id']}">{$v['name']}</option>
          {/volist}
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">参数值</label>
      <div class="layui-input-inline">
        <input type="text" name="value" lay-verify="required" class="layui-input" placeholder="请输入">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="notes" lay-verify="required" class="layui-input" placeholder="请输入">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="addConfig">确认新增</button>
      </div>
    </div>
  </form>
</div>
{/block}

{block name='js'}
<script>
  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['form', 'index','upload','admin'],function(){
    var form = layui.form;
    var admin = layui.admin;
    var upload = upload = layui.upload;
    $(".open-add").click(function(){
      var adminPopup = admin.popup({
        title: '新增网站设置'
        ,anim: -1
        ,area: ['400px', '470px']
        ,id: 'layadmin-layer-skin-test'
        ,scrollbar: false
        ,skin: 'layui-anim layui-anim-upbit'
        ,content: $(".add"),
        success: function(layero, index){

        },
        end: function(index, layero){ 

        }   
      })
    })
    //监听提交
    form.on('submit(addConfig)', function(data){
      $.post("{:url('website')}?add=1",data.field,(res)=>{
        if(res.code==1){
            layer.msg('操作成功',{time:1000},function(){
              location.reload()
            })
          }else{
            layer.msg('操作失败')
          }
      },'json')
      return false;
    });

    $(".choice-img").click(function(){
      var input = $(this).data('input')
      layer.open({
          type: 2,
          title: '选择图片',
          content: "{:url('other/img_list')}?class="+input+'&num=1',
          area: ['960px', '70%'],
          shadeClose:true
        }); 
    })

    $(".choice-img").hover(function(){
      var that = this;
      var size = $(this).data("notes");
      layer.tips(size, that,{tips:1});
    },function(){
        layer.tips();
    })

    $(".img-preview").click(function(){
      $('.preview-box img').attr('src',$("."+$(this).data('input')).val())
      layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        area: ['500px','500px'],
        shadeClose: true,
        content: $('.preview-box')
      }); 
    })

    //监听提交
    form.on('submit(editConfig)', function(data){


      $.post("{:url('website_edit')}",data.field,(res)=>{
        if(res.code==1){
            layer.msg('操作成功',{time:1000},function(){
              location.reload()
            })
          }else{
            layer.msg('操作失败')
          }
      },'json')
      return false;
    });
  });




  </script>
{/block}